<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度风云榜</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.nav{
			width:150px;
			background: blue;
			margin:50px;
		}
		/*默认子菜单隐藏*/
		.nav li ul{
			display: none;
		}
		/*切换子菜单显示*/
		.nav li.on ul{
			display: block;
		}
		.nav li ul li{
			padding-left: 20px;
		}
		/*默认的加号图片*/
		.nav li span{
			background:url(image/close.gif) no-repeat;
			padding-left: 20px;
		}
		/*减号图片*/
		.nav li.on span{
			background:url(image/open.gif) no-repeat;
		}	

	</style>
	<script src="jquery-3.1.1.min.js"></script>
	<script>
	$(function(){
		$('.nav li span').click(function(){
			//当前对象的父元素切换样式，同胞元素删除样式
			$(this).parent().toggleClass('on').siblings().removeClass('on');
		})
	})
	</script>
</head>
<body>
	<ul class="nav">
		<li><span>事件</span>
			<ul>
				<li>最近</li>
				<li>上周</li>
				<li>上月</li>
			</ul>
		</li>
		<li><span>娱乐</span>
			<ul>
				<li>游戏</li>
				<li>电影</li>
				<li>电视</li>
			</ul>
		</li>
		<li><span>人物</span>
			<ul>
				<li>美女</li>
				<li>帅哥</li>
				<li>明星</li>
			</ul>
		</li>
	</ul>
</body>
</html>